<template>
  <div>App</div>
  <p>count:{{ count }}</p>
  <button @click="addCount">addCount</button>
  <p>count:{{ person }}</p>
  <button @click="changeAge">addCount</button>
</template>

<script lang="ts">
 import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'App',
  })
</script>
<script setup lang="ts">
import {ref} from "vue"
    /* 
      使用ref方法来创建响应式数据
       - 接受一个内部值，返回一个响应式的，可更改的ref对象
       - 此对象只有一个指向其内部值的属性 .value
       - 它也是响应式的，即所有对 .value 的操作都将被追踪
       -  ref创建的响应式数据再模板中使用的时候不需要添加 .value，在setup中进行操作数据的时候要添加 .value

      ref创建一个对象类型的响应式数据
        - ref直接接收对象数据即可
        - 内部会先把接收的对象通过new Proxy()方式创建为代理对象
        - 然后把代理对象放在ref对象的value属性上
        - 代理对象就可以劫持到对象的各种操作(不再使用vue2的defineProperty做数据劫持了)
     
       使用ref方法的类型限制
        - ref方法接受一个泛型，可以传递内部value数据的类型
    */
   const count = ref<number>(1)
   console.log(count)
   const addCount = ()=>{
     count.value++
   }
   interface PersonType {
    name:string;
    age:number;
    sex:string;
    height?:number
   }
   const person = ref<PersonType>({
    name:"xiaowang",
    age:18,
    sex:"男"
   })
   console.log(person)
   const changeAge = ()=>{
    person.value.age++
   }
</script>
<style lang="less" scoped>
  
</style>